<template>
  <div>
    <el-form :inline="true" :model="selectSysOperLog" class="demo-form-inline">
      <el-form-item label="系统模块">
        <el-input v-model="selectSysOperLog.title" placeholder="系统模块"></el-input>
      </el-form-item>
      <el-form-item label="操作人员">
        <el-input v-model="selectSysOperLog.operName" placeholder="操作人员"></el-input>
      </el-form-item>
      <el-form-item label="操作类型">
        <el-select v-model="selectSysOperLog.requestMethod" placeholder="操作类型" clearable>
          <el-option label="成功" value="0"></el-option>
          <el-option label="失败" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作状态">
        <el-select v-model="selectSysOperLog.status" placeholder="操作状态" clearable>
          <el-option label="成功" value="0"></el-option>
          <el-option label="失败" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登陆时间">
        <div class="block">
          <el-date-picker
              v-model="selectSysOperLog.operTimeRange"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-top: 20px">
      <el-button type="warning" @click="outExe">导出</el-button>
      <el-button  @click="batchDelete" type="warning" :disabled="deleteDisabled">删除</el-button>
      <el-button type="primary">清空</el-button>
      <el-button round @click="toggleSelection()">取消选择</el-button>
    </div>

    <el-table
        ref="multipleTable"
        :data="sysOperLogPage"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        id="enableExportExcel">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="日志编号"
          width="120">
        <template slot-scope="scope">{{ scope.row.operId }}</template>
      </el-table-column>
      <el-table-column
          prop="title"
          label="系统模块"
          width="120">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column
          prop="requestMethod"
          label="操作类型"
          width="120">
        <template slot-scope="scope">{{ scope.row.requestMethod }}</template>
      </el-table-column>
      <el-table-column
          prop="operName"
          label="操作人员"
          width="120">
        <template slot-scope="scope">{{ scope.row.operName }}</template>
      </el-table-column>
      <el-table-column
          prop="operId"
          label="主机"
          width="120">
        <template slot-scope="scope">{{ scope.row.operId }}</template>
      </el-table-column>
      <el-table-column
          prop="deptName"
          label="操作地点"
          width="120">
        <template slot-scope="scope">{{ scope.row.deptName }}</template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="操作状态"
          width="120">
        <template slot-scope="scope">{{ scope.row.status }}</template>
      </el-table-column>
      <el-table-column
          prop="operTime"
          label="操作日期"
          width="200">
        <template slot-scope="scope">{{ scope.row.operTime }}</template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="详情"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click="openOperatorLogDetailDialog(scope.row)"
              type="text"
              size="small">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--    详情对话框-->
    <el-button type="text" @click="detailDialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
        title="操作日志详情"
        :visible.sync="detailDialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :model="sysOperatorLogDetail" style="text-align: left">
        <el-row>
          <el-col span="12">
            <el-form-item label="操作模块:" prop="title">
              {{sysOperatorLogDetail.title}}
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="请求地址">
              {{sysOperatorLogDetail.operUrl}}
            </el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="登录信息">{{sysOperatorLogDetail.operUrl}}</el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="请求方式">{{sysOperatorLogDetail.operUrl}}</el-form-item>
          </el-col>
          <el-col span="24">
            <el-form-item label="操作方法">{{sysOperatorLogDetail.method}}</el-form-item>
          </el-col>
          <el-col span="24">
            <el-form-item label="请求参数">{{sysOperatorLogDetail.operParam}}</el-form-item>
          </el-col>
          <el-col span="24">
            <el-form-item label="返回参数">{{sysOperatorLogDetail.joinResult}}</el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="操作状态">{{sysOperatorLogDetail.status}}</el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="操作事件">{{sysOperatorLogDetail.title}}</el-form-item>
          </el-col>
          <el-col span="12">
            <el-form-item label="异常信息">{{sysOperatorLogDetail.errorMsg}}</el-form-item>
          </el-col>

        </el-row>
      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="detailDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {
  data() {
    return {
      //单个登录日志对象
      sysOperLog: {
        //日志主键
        operId: '',
        //模块标题
        title: '',
        //业务类型
        businessType: '',
        // 方法名称
        method: '',
        // 请求方法
        requestMethod: '',
        //操作类别 0-其他，1-后台用户，2-手机端用户
        operatorType: '',
        // 操作人员
        operName: '',
        // 部门名称
        deptName: '',
        // 请求Url
        operUrl: '',
        //主机地址
        operIp: '',
        // 操作地址
        operLocation: '',
        // 请求参数
        operParam: '',
        // 返回参数
        joinResult: '',
        // 操作状态 0-正常 1-异常
        status: '',
        // 操作时间
        operTime: '',
      },
      // 当前第几页
      current: 1,
      //一页有几行
      size: 5,
      //一共有几条数据
      total: 0,
      //模糊查询条件变量
      selectSysOperLog: {
        // 系统模块
        title: '',
        // 操作人员
        operName: '',
        //类型  操作类型  请求方法
        requestMethod: '',
        // 状态  操作状态
        status: '',
        // 操作时间
        operTimeRange: '',
        // 操作时间_开始
        operTimeRangeStart: '',
        // 操作时间_结束
        operTimeRangeEnd: '',
      },
      //分页数据
      sysOperLogPage: null,
      //表格复选框标签
      multipleSelection: [],
      // 详情对话框是否可见的属性
      detailDialogVisible: false,
      // 操作日志详情
      sysOperatorLogDetail:{
        //日志主键
        operId: '',
        //模块标题
        title: '',
        //业务类型
        businessType: '',
        // 方法名称
        method: '',
        // 请求方法
        requestMethod: '',
        //操作类别 0-其他，1-后台用户，2-手机端用户
        operatorType: '',
        // 操作人员
        operName: '',
        // 部门名称
        deptName: '',
        // 请求Url
        operUrl: '',
        //主机地址
        operIp: '',
        // 操作地址
        operLocation: '',
        // 请求参数
        operParam: '',
        // 返回参数
        joinResult: '',
        // 操作状态 0-正常 1-异常
        status: '',
        // 操作时间
        operTime: '',
      },
      // 删除按钮是否隐藏的变量
      deleteDisabled:true,
      // 复选框选中的Id
      multipleSelectionSysOperLogIds:[]
    }
  },

  methods: {

    handleSizeChange(val) {
      this.size = val
      this.loadSysOperLogPage()
    },
    handleCurrentChange(val) {
      this.current = val
      this.loadSysOperLogPage()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //保存字典ID
      this.multipleSelectionSysOperLogIds=[]
      for (const multipleSelectionElement of this.multipleSelection) {
        this.multipleSelectionSysOperLogIds.push(multipleSelectionElement.operId)
      }

      if (this.multipleSelection.length>0){
        //  可见
        this.deleteDisabled=false
      }else {
        // 不可见
        this.deleteDisabled=true
      }
      if (this.multipleSelection.length==1){
        //  可见
        this.updateDisabled=false
      }else {
        // 不可见
        this.updateDisabled=true
      }
    },
    loadSysOperLogPage() {
      this.axios.get("/sysOperLogPage/page?current=" + this.current
          + "&size=" + this.size
          + "&title=" + this.selectSysOperLog.title
          + "&operName=" + this.selectSysOperLog.operName
          + "&requestMethod=" + this.selectSysOperLog.requestMethod
          + "&status=" + this.selectSysOperLog.status
          + "&operTimeStart=" + this.selectSysOperLog.operTimeRangeStart
          + "&operTimeEnd=" + this.selectSysOperLog.operTimeRangeEnd
      )
          .then(result => {
            this.sysOperLogPage = result.data.data.records
            this.total = result.data.data.total
          })

    },
    // 模糊查询搜索按钮
    onSubmit() {
      console.log(this.selectSysOperLog.operTimeRange)
      this.selectSysOperLog.operTimeRangeStart = ''
      this.selectSysOperLog.operTimeRangeEnd = ''
      if (this.selectSysOperLog.operTimeRange != null && this.selectSysOperLog.operTimeRange.length != 0) {
        this.selectSysOperLog.operTimeRangeStart = this.selectSysOperLog.operTimeRange[0]
        this.selectSysOperLog.operTimeRangeEnd = this.selectSysOperLog.operTimeRange[1]
        console.log(this.selectSysOperLog.operTimeRangeStart)
        console.log(this.selectSysOperLog.operTimeRangeEnd)
      }
      this.current = 1
      this.loadSysOperLogPage()
    },
    //   导出表格数据为Excel
    //导出excel表格
    outExe() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.deptList; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {
          });
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = {raw: true};
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#enableExportExcel").removeChild(fix), xlsxParam);
        document.querySelector("#enableExportExcel").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#enableExportExcel"), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    // 打开操作日志详情对话框
    openOperatorLogDetailDialog(row){
      this.sysOperatorLogDetail=row
      this.detailDialogVisible=true
    },
    // 批量删除
    batchDelete() {
      this.axios.delete("/sysOperLogPage/batchDelete/"+this.multipleSelectionSysOperLogIds)
          .then(result=>{
            this.current=1
            this.loadSysOperLogPage()
          })

    },

  },

  mounted() {
    this.loadSysOperLogPage()
  }
}
</script>